<template>

    <el-container>
      <el-aside width="12.5rem" class="leftBar">
        <LeftBar/>
      </el-aside>
      <el-main>
        <!-- 孙建铭写： -->
        <div class = "all">

          <el-row :gutter="500">
            <el-col :span="6" > <div class="time"><localtime/></div></el-col>
            <el-divider direction="vertical"> 起飞 </el-divider>
            <el-col :span="6" ><div class = "echartsDemo"><echartsDemo/></div></el-col>
          </el-row>


        <div class="jiange">
          <el-row :gutter="1" style="line-height: 2.5rem">
            <el-col :span="6" :offset="6" > <div> have a good lucy</div></el-col>
            <el-col :span="8" ><div > ————huangziting </div></el-col>
          </el-row>
        </div>

          <el-row :gutter="500">
            <el-col :span="6" >  <div class="jindu"><jingdutiao/> </div></el-col>
            <el-divider direction="vertical"> 起飞 </el-divider>
            <el-col :span="6" ><div class="todo"><todolist/> </div></el-col>
          </el-row>


        </div>
      </el-main>
    </el-container>


</template>

<script setup>

import LeftBar from "@/components/LeftBar.vue"
import jingdutiao from "@/components/Person/jingdutiao.vue";
import localtime from "@/components/Person/localtime.vue";
import Todolist from "@/components/Person/todolist.vue";
import echartsDemo from "@/components/Person/echartsDemo.vue";

</script>

<style scoped>
.time{
  display: flex;
  width:  31.25rem;
  height: 18.75rem;
  /*border-right:  5px solid #f2f2f2;*/
  padding-right: 3.125rem;
}
.jindu{
  display: inline-block;
  width: 25rem;
  height: 21.875rem;
  border-right:  0.3125rem solid #f2f2f2;
  padding-right: 3.125rem;

}

.leftBar{
  /*border: 1px solid forestgreen;*/
  box-shadow: 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.2);
  border-radius: 1.25rem;
  margin-left: 3%;
  height: 50rem;
}
.jiange{
  margin-top: 0.25rem;
  border-radius: 0.75rem;
  background-color: #ced4da;
  /*width: 1200px;*/
  height: 2.5rem;
}
.todo{
  display: flex;
  width: 30%;
  /*position: relative;*/
  left: 3.125rem;
  top: -19.5rem;
}
.echartsDemo{
  /*display: flex;*/
  /*height: 400px;*/
  /*width: 400px;*/
  /*position: absolute;*/
  /*left: 900px;*/
  /*bottom: 700px;*/
}

.all{
 left: auto;
  margin-left: 2rem;
  overflow-x: hidden;
  overflow-y: hidden;
}

/*.sjm{*/
/*  display: flex;*/
/*}*/
</style>
